<template>
	<view class="search-box">
	<uni-icons type="search" size="20" color="#999"></uni-icons>
	<input type="text" v-model="searchText" placeholder="搜索音乐" placeholder-class="placeholder" @confirm="handleSearch" />
	</view>
</template>

<script>
	export default {
	  name: 'SearchBox',
	  data() {
		return {
		  searchText: '',
		  searchResults: []
		}
	  },
	  emits: ["search"],
	  methods: {
		handleSearch() {
		  console.log('搜索关键词:', this.searchText)
		  
		  // 调用后端API进行搜索
		  uni.request({
			url: "http://localhost:3000/search?keywords=" + this.searchText,
			method: "GET",
			success: (res) => {
			  console.log('搜索结果:', res.data)
			  this.searchResults = res.data.result || []
			  this.$emit("search", this.searchResults)
			},
			fail: (err) => {
			  console.log('搜索失败:', err)
			  uni.showToast({
				title: '搜索失败，请稍后再试',
				icon: 'none'
			  })
			}
		  })
		}
	  }
	}
</script>

<style>
	.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f1f1f1;
	border-radius: 32rpx;
	padding: 16rpx 24rpx;
	}
	.search-box input {
	flex: 1;
	font-size: 14px;
	margin-left: 16rpx;
	}
</style>